<!--条形图-->
<template>

</template>

<script>
export default {
  name: "my-bar",
  mounted() {
    //要数据
    this.$http.post("http://localhost:9000/money/selectMoneyId", {
      userId: sessionStorage.getItem("token")
    }).then((res) => {
      console.log(res);
      this.drawLine(res.data[0], res.data[1], res.data[2], res.data[3], res.data[4]);
    }).catch(() => {
      console.log("查询失败")
    })
  },
  methods: {
    drawLine(date1, date2, date3, date4, date5) {
      let myChart;
      myChart = this.$echarts.getInstanceByDom(document.getElementById('myChart'))
      //防止重复创建
      if (myChart == null) {
        myChart = this.$echarts.init(document.getElementById('myChart'))
      }
      //清空再画，不然会重叠
      myChart.clear();
      // 绘制图表
      myChart.setOption({
        title: {
          text: '支付类型金额汇总'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['现金', '支付宝', '微信', '银行卡', '其他'],
          left: '40%'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['金额']
        },
        series: [
          {
            name: '现金',
            type: 'bar',
            data: [date1]
          },
          {
            name: '支付宝',
            type: 'bar',
            data: [date2]
          },
          {
            name: '微信',
            type: 'bar',
            data: [date3]
          },
          {
            name: '银行卡',
            type: 'bar',
            data: [date4]
          },
          {
            name: '其他',
            type: 'bar',
            data: [date5]
          },
        ]
      });
    }
  }
}
</script>

<style scoped>

</style>
